<template>
    <div class="test-content test4">
        <div class="left-require">
            <div>
                <img class="" src="../../statics/img/table-list.jpg" alt="">
                <h2>在右侧空白区域完成如图所示的表格,表格数据见参数table_data，不得使用其他插件或组件（包括elementUI）</h2>
                <h2>表格数据查询，根据查询条件筛选数组中的值，实现搜索功能</h2>
                <h2>性别列下拉筛选功能实现</h2>
                <h2>入学时间和毕业时间排序功能实现</h2>
                <h2 style="color: red">确认完成所有测试后需使用webpack将代码打包到文件夹dist</h2>
            </div>
        </div>

        <div class="right-content">
            <!--代码区域-->
            <search @handleSearch="handleSearch" />
            <uiTable :columns="columns" :data="table_data" />
        </div>
    </div>
</template>

<script>
//表格数据查询，根据查询条件筛选数组中的值，实现搜索功能
//下拉筛选功能实现
//排序功能实现
import uiTable from '../../components/table.vue'
import search from './components/search.vue'
const listData = [
    { name: '张三', phone: '15222222222', sex: 'male', id: '510000000000000000', start_date: '2018-12-14 09:00', end_date: '2022-12-14 09:00' },
    { name: '李四', phone: '15221232222', sex: 'male', id: '510000000000000001', start_date: '2018-12-14 15:00', end_date: '2022-12-14 16:00' },
    { name: '韩梅梅', phone: '15222224562', sex: 'female', id: '51000000004500000', start_date: '2020-12-14 09:00', end_date: '2024-12-14 09:00' },
    { name: '李雷', phone: '15222662222', sex: 'male', id: '510000067000000000', start_date: '2017-12-14 09:00', end_date: '2020-12-14 09:00' },
    { name: '王雪', phone: '17822222222', sex: 'female', id: '515400004500000000', start_date: '2016-12-14 09:00', end_date: '2019-12-14 09:00' }
]
//多条件并列筛选数据
const fetchData = (payLoad,someField,allField) => { //payLoad：条件 someField：模糊查询字段集合 allField：全值查询字段集合
    return listData.filter((item) => {
        let isShow = Object.keys(payLoad).every((key) => {
            let value = payLoad[key];
            if (someField.includes(key)) { //模糊查询
                return value ? item.hasOwnProperty(key) && item[key].indexOf(value) != -1 : true;
            }
            if (allField.includes(key)) {//全值匹配
                return value ? item.hasOwnProperty(key) && item[key] === value : true;
            }
        })
        return isShow;
    })
}
export default {
    name: "test_4",
    components: {
        uiTable, search
    },
    data() {
        return {
            //表格配置
            columns: [
                {
                    title: '姓名', dataIndex: 'name', key: 'name', width: '13%',
                    filters: [ //开启筛选
                        { text: '张三', value: '张三' },
                        { text: '李四', value: '李四' },
                        { text: '王雪', value: '王雪' },
                    ]
                },
                { title: '电话号码', dataIndex: 'phone', key: 'phone', width: '15%' },
                {
                    title: '性别', dataIndex: 'sex', key: 'sex', width: '13%',
                    filters: [ //开启筛选
                        { text: '男', value: 'male' },
                        { text: '女', value: 'female' }
                    ],
                    cusText:{ 'male': '男', 'female': '女' } //自定义数据解析
                },
                { title: '身份号码', dataIndex: 'id', key: 'id', width: '19%' },
                {
                    title: '入学时间', dataIndex: 'start_date', key: 'start_date', width: '20%',
                    sort: true //开启排序
                },
                {
                    title: '毕业时间', dataIndex: 'end_date', key: 'end_date', width: '20%',
                    sort: true //开启排序
                },
            ],
            //表格数据
            table_data: [],
        }
    },
    mounted() {
        this.table_data = fetchData({},['name'],['phone'])
    },
    methods: {
        //表格条件查询
        handleSearch(payLoad) {
            this.table_data = [...fetchData(payLoad,['name'],['phone'])]
        },

    }
}
</script>

<style scoped></style>